<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前端 | WEB | VUE">
<meta property="og:type" content="website">
<meta property="og:title" content="Storm">
<meta property="og:url" content="https://storm4542.github.io/index.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="前端 | WEB | VUE">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Storm">
<meta name="twitter:description" content="前端 | WEB | VUE">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main">
  
    <article id="post-axios-cancel-token" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="14284da1.html">axios cancel token</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="14284da1.html" class="article-date">
  <time datetime="2019-06-04T03:25:17.000Z" itemprop="datePublished">2019-06-04</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="axios-cancel-request"><a href="#axios-cancel-request" class="headerlink" title="axios  cancel  request"></a>axios  cancel  request</h1><p><a name="JiqDO"></a></p>
<h3 id="单个请求"><a href="#单个请求" class="headerlink" title="单个请求"></a>单个请求</h3><p><a name="32Bvr"></a></p>
<h4 id="通过CancelToken-source工厂函数创建-cancel-token"><a href="#通过CancelToken-source工厂函数创建-cancel-token" class="headerlink" title="通过CancelToken.source工厂函数创建 cancel token"></a>通过CancelToken.source工厂函数创建 cancel token</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line"><span class="keyword">const</span> source = CancelToken.source();</span><br><span class="line"></span><br><span class="line">axios.get(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  cancelToken: source.token</span><br><span class="line">&#125;).catch(<span class="function"><span class="keyword">function</span> (<span class="params">thrown</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (axios.isCancel(thrown)) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Request canceled'</span>, thrown.message);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// handle error</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">axios.post(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  name: <span class="string">'new name'</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">  cancelToken: source.token</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// cancel the request (the message parameter is optional)</span></span><br><span class="line">source.cancel(<span class="string">'Operation canceled by the user.'</span>);</span><br></pre></td></tr></table></figure>
<p><a name="xP9V9"></a></p>
<h4 id="通过执行函数创建-cancel-token"><a href="#通过执行函数创建-cancel-token" class="headerlink" title="通过执行函数创建 cancel token"></a>通过执行函数创建 cancel token</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line"><span class="keyword">let</span> cancel;</span><br><span class="line"></span><br><span class="line">axios.get(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  cancelToken: <span class="keyword">new</span> CancelToken(<span class="function"><span class="keyword">function</span> <span class="title">executor</span>(<span class="params">c</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// An executor function receives a cancel function as a parameter</span></span><br><span class="line">    cancel = c;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// cancel the request</span></span><br><span class="line">cancel();</span><br></pre></td></tr></table></figure>
<p><a name="Lop4g"></a></p>
<h3 id="在路由切换时-cancel-request"><a href="#在路由切换时-cancel-request" class="headerlink" title="在路由切换时 cancel request"></a>在路由切换时 cancel request</h3><p><a name="50xCr"></a></p>
<h4 id="配置全局变量-source"><a href="#配置全局变量-source" class="headerlink" title="配置全局变量 source"></a>配置全局变量 source</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Vue.prototype.store = &#123;</span><br><span class="line">       source: &#123;</span><br><span class="line">           token: <span class="literal">null</span>,</span><br><span class="line">           cancel: <span class="literal">null</span></span><br><span class="line">       &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><a name="wPxV8"></a></p>
<h4 id="配置-router"><a href="#配置-router" class="headerlink" title="配置 router"></a>配置 router</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//router.js</span></span><br><span class="line"></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(Vue.prototype.store.source);</span><br><span class="line">    <span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line">    Vue.prototype.store.source.cancel &amp;&amp; Vue.prototype.store.source.cancel();</span><br><span class="line">    Vue.prototype.store.source = CancelToken.source();</span><br><span class="line">    next();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><a name="okTyF"></a></p>
<h4 id="配置-axios"><a href="#配置-axios" class="headerlink" title="配置 axios"></a>配置 axios</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = axios.create()</span><br><span class="line">http.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.cancelToken = store.source.token</span><br><span class="line">    <span class="keyword">return</span> config</span><br><span class="line">&#125;, err =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Map&amp;&amp;Set" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="be65f012.html">Map &amp;&amp; Set</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="be65f012.html" class="article-date">
  <time datetime="2019-05-27T02:56:42.000Z" itemprop="datePublished">2019-05-27</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p><a name="vwKgD"></a></p>
<h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h2><p><a name="UUV6K"></a></p>
<h3 id="Methods"><a href="#Methods" class="headerlink" title="Methods"></a>Methods</h3><p>Map 是一个键值对的集合，与 Object 很像 ，<strong>但是 Map 允许任何数据类型作为键</strong>。<br>主要的方法包括：</p>
<ul>
<li><code>new Map()</code> – 创建 map。</li>
<li><code>map.set(key, value)</code> – 根据键（key）存储值（value）。</li>
<li><code>map.get(key)</code> – 根据键返回值，如果 map 中该键不存在，返回 <code>undefined</code>。</li>
<li><code>map.has(key)</code> – 如果键存在，返回 <code>true</code>，否则返回 <code>false</code>。</li>
<li><code>map.delete(key)</code> – 移除该键的值。</li>
<li><code>map.clear()</code> – 清空 map</li>
<li><code>map.size</code> – 返回当前元素个数。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">map.set(<span class="number">1</span>,<span class="string">'num'</span>);</span><br><span class="line">map.set(<span class="string">'1'</span>,<span class="string">'str'</span>);</span><br><span class="line">map.set(<span class="literal">true</span>,<span class="string">'bool'</span>);</span><br><span class="line"><span class="comment">// Object 会将所有的键转化为字符串</span></span><br><span class="line">map.get(<span class="number">1</span>); <span class="comment">// 'num'</span></span><br><span class="line">map.get(<span class="string">'1'</span>); <span class="comment">// 'str'</span></span><br></pre></td></tr></table></figure>
<p>Map 还可以使用对象来作为键</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="number">1</span>&#125;;</span><br><span class="line">map.set(obj,<span class="number">1</span>);</span><br><span class="line">map.get(obj); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
<p><a name="uknod"></a></p>
<h3 id="将-Object-转化为-Map"><a href="#将-Object-转化为-Map" class="headerlink" title="将 Object 转化为 Map"></a>将 Object 转化为 Map</h3><p>在创建 Map 时可以给构造函数传递一个<code>[key,value]</code>键值对数组。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">'1'</span>,<span class="string">'str'</span>],[<span class="number">1</span>,<span class="string">'num'</span>]]);</span><br></pre></td></tr></table></figure></p>
<p>有一个内建方法 <code>Object.entries</code> 可以返回对象的键值对数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>(<span class="built_in">Object</span>.entries(&#123;</span><br><span class="line">	name:<span class="string">'Jhon'</span>,</span><br><span class="line">  age:<span class="number">12</span></span><br><span class="line">&#125;));</span><br></pre></td></tr></table></figure>
<p>这里  <code>Object.entries</code> 返回了<code>[[&#39;name&#39;,&#39;Jhon&#39;], [&#39;age&#39;,12]]</code></p>
<p><a name="9KduC"></a></p>
<h3 id="遍历-Map"><a href="#遍历-Map" class="headerlink" title="遍历 Map"></a>遍历 Map</h3><p>有三种方法可以循环遍历 <code>map</code>：</p>
<ul>
<li><code>map.keys()</code> – 返回键的迭代器，</li>
<li><code>map.values()</code> – 返回值的迭代器，</li>
<li><code>map.entries()</code> – 返回 <code>[key, value]</code> 迭代器入口，<code>for..of</code> 循环会默认使用它。</li>
</ul>
<p>例如：<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> recipeMap = <span class="keyword">new</span> <span class="built_in">Map</span>([</span><br><span class="line">  [<span class="string">'cucumber'</span>, <span class="number">500</span>],</span><br><span class="line">  [<span class="string">'tomatoes'</span>, <span class="number">350</span>],</span><br><span class="line">  [<span class="string">'onion'</span>,    <span class="number">50</span>]</span><br><span class="line">]);</span><br><span class="line"><span class="comment">// 迭代键（vegetables）</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> vegetable <span class="keyword">of</span> recipeMap.keys()) &#123;</span><br><span class="line">  alert(vegetable); <span class="comment">// cucumber, tomatoes, onion</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 迭代值（amounts）</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> amount <span class="keyword">of</span> recipeMap.values()) &#123;</span><br><span class="line">  alert(amount); <span class="comment">// 500, 350, 50</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 迭代键值对 [key, value]</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> entry <span class="keyword">of</span> recipeMap) &#123; <span class="comment">// 和 recipeMap.entries() 一样</span></span><br><span class="line">  alert(entry); <span class="comment">// cucumber,500（等等）</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>The insertion order is used</strong><br>和普通 <code>Object</code> 不同，迭代器的迭代顺序和值被插入的顺序一致，<code>Map</code> 会保留这个顺序。<br>另外，<code>Map</code> 有一个内建的 <code>forEach</code> 方法，和 <code>Array</code> 很像：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">recipeMap.forEach( <span class="function">(<span class="params">value, key, map</span>) =&gt;</span> &#123;</span><br><span class="line">  alert(<span class="string">`<span class="subst">$&#123;key&#125;</span>: <span class="subst">$&#123;value&#125;</span>`</span>); <span class="comment">// cucumber: 500 等等</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<p><a name="ppZ1Q"></a></p>
<h2 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h2><p>Set 是一个值的集合，<strong>集合中所有值只出现一次</strong>。<br>主要方法包括：</p>
<ul>
<li><code>new Set(iterable)</code> – 创建 set，利用数组来创建是可选的（任何可迭代对象都可以）。</li>
<li><code>set.add(value)</code> – 添加值，返回 set 自身。</li>
<li><code>set.delete(value)</code> – 删除值，如果该 <code>value</code> 在调用方法的时候存在则返回 <code>true</code> ，否则返回 <code>false</code>。</li>
<li><code>set.has(value)</code> – 如果 set 中存在该值则返回 <code>true</code> ，否则返回 <code>false</code>。</li>
<li><code>set.clear()</code> – 清空 set。</li>
<li><code>set.size</code> – 元素个数。</li>
</ul>
<p>例如，我们有访客登门，我们希望记住所有人。但是重复来访者并不应该有两份记录。一个访客必须只记录一次。<br><code>Set</code> 就恰好是可以做到这个的数据结构：<br><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> set = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line"><span class="keyword">let</span> john = &#123; <span class="attr">name</span>: <span class="string">"John"</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> pete = &#123; <span class="attr">name</span>: <span class="string">"Pete"</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> mary = &#123; <span class="attr">name</span>: <span class="string">"Mary"</span> &#125;;</span><br><span class="line"><span class="comment">// 访客，一些用户来了多次</span></span><br><span class="line">set.add(john);</span><br><span class="line">set.add(pete);</span><br><span class="line">set.add(mary);</span><br><span class="line">set.add(john);</span><br><span class="line">set.add(mary);</span><br><span class="line"><span class="comment">// set 保证了值的唯一</span></span><br><span class="line">alert( set.size ); <span class="comment">// 3</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> user <span class="keyword">of</span> set) &#123;</span><br><span class="line">  alert(user.name); <span class="comment">// John（然后是 Pete 和 Mary）</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><code>Set</code> 的替换方案是使用用户数组，每次插入新元素时使用 <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">arr.find</a> 方法检查用户编码是否重复。但是性能就会很差，因为这个方法会遍历整个数组，检查每个元素。而对于唯一性检查，<code>Set</code> 在内部优化得更好。<br><a name="sGl9y"></a></p>
<h3 id="Set-迭代"><a href="#Set-迭代" class="headerlink" title="Set 迭代"></a>Set 迭代</h3><p>我们可以使用 <code>for..of</code> 或者 <code>forEach</code> 来循环查看 set：<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> set = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">"oranges"</span>, <span class="string">"apples"</span>, <span class="string">"bananas"</span>]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> value <span class="keyword">of</span> set) alert(value);</span><br><span class="line"><span class="comment">// 和 forEach 相同：</span></span><br><span class="line">set.forEach(<span class="function">(<span class="params">value, valueAgain, set</span>) =&gt;</span> &#123;</span><br><span class="line">  alert(value);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<p>注意到这里有个有趣得事情。<code>forEach</code> 函数用于 <code>Set</code> 时有三个参数：value，然后又一个 value，之后是目标对象。确实，相同值的 value 在参数中出现了两次。<br>这是为了兼容 <code>Map</code>，它在使用 <code>forEach</code> 方法时也包括三个参数。<br>适用于 <code>Map</code> 的迭代方法 set 也同样支持：</p>
<ul>
<li><code>set.keys()</code> – 返回 set 中值的迭代对象，</li>
<li><code>set.values()</code> – 和 <code>set.keys</code> 一样，为了兼容 <code>Map</code>，</li>
<li><code>set.entries()</code> – 返回形如 <code>[value, value]</code> 的迭代对象，为了兼容 <code>Map</code> 而存在。</li>
</ul>
<p><a name="tYqDG"></a></p>
<h3 id="数组通过-Set-去重"><a href="#数组通过-Set-去重" class="headerlink" title="数组通过 Set 去重"></a>数组通过 Set 去重</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> newArr = <span class="built_in">Array</span>.from(<span class="keyword">new</span> <span class="built_in">Set</span>(oldArr));</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-JS的运行机制" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="b422724c.html">JS的运行机制</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="b422724c.html" class="article-date">
  <time datetime="2019-05-27T02:55:37.000Z" itemprop="datePublished">2019-05-27</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p><a name="hE5hW"></a></p>
<h2 id="1-为什么JS是单线程的？"><a href="#1-为什么JS是单线程的？" class="headerlink" title="1.为什么JS是单线程的？"></a>1.为什么JS是单线程的？</h2><p>JavsScript 的目的就是与用户交互，以及操作 DOM ， 假如是多线程的，A线程添加了一个DOM节点，B线程删除了该DOM节点，这时浏览器应该以那个为准呢？<br>为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。</p>
<p><a name="yPVlP"></a></p>
<h2 id="2-任务队列-task-queue"><a href="#2-任务队列-task-queue" class="headerlink" title="2.任务队列  task queue"></a>2.任务队列  task queue</h2><p>因为JS是单线程的，所以所有的任务都要在主线程里排队，一个一个执行。但是因为 I/O 设备很慢，CPU 很快，所以大多数时间 CPU 都是闲着的。因此 JavaScript 的设计者意识到，这时主线程可以不用管 I/O 设备，先挂起，执行后面的任务，等 I/O 设备返回了结果，再处理。</p>
<p>因此任务分为了两种，同步任务和异步任务。</p>
<p><a name="JWjpb"></a></p>
<h3 id="2-1-同步任务"><a href="#2-1-同步任务" class="headerlink" title="2.1 同步任务"></a>2.1 同步任务</h3><p>同步任务是指在主线程排队的任务，他们会按照顺序一个一个的执行。</p>
<p><a name="S5cRn"></a></p>
<h3 id="2-2-异步任务"><a href="#2-2-异步任务" class="headerlink" title="2.2 异步任务"></a>2.2 异步任务</h3><p>异步任务是指不在主线程，而是在任务队列(task queue)的任务，只有任务队列向主线程通知，某个异步任务可以执行了，该任务才会进入主线程执行。<br>异步的执行流程如下：</p>
<blockquote>
<p>( 1 ) 所有同步任务都在主线程上执行，形成一个执行栈<br>( 2 ) 主线程之外还有一个任务队列。只要异步任务返回了结果，就在任务队列之中放置一个事件<br>( 3 ) 一旦执行栈中的同步任务执行完毕，系统就会读取任务队列，其中的异步任务会结束等待状态，进入执行栈，开始执行<br>( 4 ) 主线程不断重复以上三个过程<br></p>
</blockquote>
<p>以下是主线程和任务队列的示意图<br><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/148286/1557456919693-9ba790ff-b2ad-41ea-82e9-1e21f5227f97.jpeg" alt="bg2014100801.jpg"><br>只要主线程空了，就回去读取任务队列。<br>任务队列是“先进先出”的结构。<br><a name="HDq8H"></a></p>
<p>##<br><a name="1Tuxe"></a></p>
<h2 id="3-事件和回调函数"><a href="#3-事件和回调函数" class="headerlink" title="3.事件和回调函数"></a>3.事件和回调函数</h2><p>任务队列是事件的队列，I/O 设备每执行完一个任务，就会向任务队列中添加一个事件，主线程的执行栈为空时，就会去读取任务队列的事件。<br>除了 I/O 设备外，还有一些用户的事件（onClick,onScroll等），这些事件需要指定回调函数，进入任务队列，等待主线程读取。<br>所谓回调函数（callback），就是指被主线程挂起的代码，异步事件必须指定回调函数，主线程在任务队列读取并执行的就是回调函数。</p>
<p><a name="B1pDY"></a></p>
<h2 id="4-Event-Loop"><a href="#4-Event-Loop" class="headerlink" title="4.Event Loop"></a>4.Event Loop</h2><p>主线程执行栈一空，就去读取任务队列，这是一个不断循环的过程，这种运行机制被称为 Event Loop(事件循环)。<br>示意图：<br><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1557457486862-5373606b-967f-4850-b895-87d7e5811bdf.png" alt="bg2014100802.png"><br>主线程运行的时候产生堆（heap）和栈（stack），在栈中执行的同步任务会调用 WebAPI，他们会在任务队列中添加各种回调函数，执行栈清空后，主线程读取任务队列，依次执行队列中的回调函数。<br><br><br>因此执行栈中的同步函数，总是在读取任务队列之前执行。</p>
<p>举个例子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> xml = <span class="keyword">new</span> XMlHttoRequest()</span><br><span class="line">xml.open(<span class="string">'GET'</span>,url)</span><br><span class="line">xml.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">xml.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">xml.send()</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> xml = <span class="keyword">new</span> XMlHttoRequest()</span><br><span class="line">xml.open(<span class="string">'GET'</span>,url)</span><br><span class="line">xml.send()</span><br><span class="line">xml.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">xml.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<p>上面两组代码的区别在于 <code>xml.send()</code>的位置不同。但是执行起来是没有任何区别的。<br>因为<code>xml.send()</code>是异步方法，他会被放在任务队列，而指定回调的部分（onload,onerror）在执行栈中，所以两者的执行顺序是可以预见的。</p>
<p><a name="GyLNw"></a></p>
<h2 id="5-setTimeout"><a href="#5-setTimeout" class="headerlink" title="5. setTimeout"></a>5. setTimeout</h2><p>setTimeout 的第一个参数是回调函数，第二个参数是 最小延迟时间。</p>
<p>setTimeout(func,0)的意思是指，在主线程空闲后，尽可能早的执行 func。因此 func 会在放入任务队列的尾部执行。</p>
<p>根据上面我们可以知道，必须等待主线程空闲后才可以执行 setTimeout(func,dely)，假如主线程有一个任务需要很久才能完成，setTimeout 的执行间隔就不能保证了，因此 dely 是指 最小延迟时间 , 而不是固定延时时间。</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-使用Vue Cli3打包组件并发布至npm" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="8ea8a281.html">使用 Vue Cli 3 打包组件并发布至npm</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="8ea8a281.html" class="article-date">
  <time datetime="2019-05-27T02:54:14.000Z" itemprop="datePublished">2019-05-27</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p><a name="XTDAo"></a></p>
<h2 id="1-使用-Vue-Cli-3-创建项目"><a href="#1-使用-Vue-Cli-3-创建项目" class="headerlink" title="1.使用 Vue Cli 3 创建项目"></a>1.使用 Vue Cli 3 创建项目</h2><p><code>vue create vue-test</code></p>
<p><a name="RfzFH"></a></p>
<h2 id="2-修改目录并配置webpack"><a href="#2-修改目录并配置webpack" class="headerlink" title="2.修改目录并配置webpack"></a>2.修改目录并配置webpack</h2><p>修改后的目录<br><strong><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923194873-d02299bf-4410-4267-926c-2bcec79d11a6.png" alt="image.png"></strong></p>
<ul>
<li>src -&gt; examples  用于放置示例文件</li>
<li>增加 packages 文件夹 用于打包</li>
<li>增加 lib 文件夹 用户放置打包后的文件</li>
<li>增加 vue.config.js 文件 用于配置webpack</li>
</ul>
<p><strong>vue.config.js 配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">    pages: &#123;</span><br><span class="line">        index: &#123;</span><br><span class="line">            entry: <span class="string">'examples/main.js'</span>,</span><br><span class="line">            template: <span class="string">'public/index.html'</span>,</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    css: &#123;</span><br><span class="line">        extract: <span class="literal">false</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">    chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">        config.module</span><br><span class="line">            .rule(<span class="string">'js'</span>)</span><br><span class="line">            .include</span><br><span class="line">            .add(<span class="string">'/packages'</span>)</span><br><span class="line">            .end()</span><br><span class="line">            .use(<span class="string">'babel'</span>)</span><br><span class="line">            .loader(<span class="string">'babel-loader'</span>)</span><br><span class="line">            .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">// 修改它的选项...</span></span><br><span class="line">                <span class="keyword">return</span> options;</span><br><span class="line">            &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><a name="TP1jO"></a></p>
<h2 id="3-packages-配置"><a href="#3-packages-配置" class="headerlink" title="3.packages 配置"></a>3.packages 配置</h2><p><strong>packages/index.js</strong><br>用于导出组件，<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入组件</span></span><br><span class="line"><span class="keyword">import</span> datePicker <span class="keyword">from</span> <span class="string">'./datepicker'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">    datePicker</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 判断是否安装</span></span><br><span class="line">    <span class="keyword">if</span> (install.installed) <span class="keyword">return</span>;</span><br><span class="line">    <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">    components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component));</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">'undefined'</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">    install(<span class="built_in">window</span>.Vue);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">    install,</span><br><span class="line">    <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">    datePicker</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p><strong>packages/datepicker/index.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> datepicker <span class="keyword">from</span> <span class="string">'./src/date-picker'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">datepicker.install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">    Vue.component(datepicker.name, datepicker); <span class="comment">//datepiacker.name 下面解释</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> datepicker;</span><br></pre></td></tr></table></figure>
<ul>
<li>datepicker.name  为组件内的 name , 未来使用时，需要使用该 name 作为标签，因此不能随意写。</li>
</ul>
<p><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923611695-fbdca6d1-4f50-4976-b223-37f659f9bacb.png" alt="image.png"></p>
<p><strong>packages/src</strong></p>
<p>里面包含组件的所有文件</p>
<p><a name="B713v"></a></p>
<h2 id="4-package-json"><a href="#4-package-json" class="headerlink" title="4. package.json"></a>4. package.json</h2><p>在 scripts 中增加一行命令</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"lib"</span>: <span class="string">"vue-cli-service build --target lib --name vue-simple-datepicker --dest lib packages/index.js"</span>,</span><br></pre></td></tr></table></figure>
<ul>
<li>–target lib  表明打包至 lib 文件夹</li>
<li>–name vue-simple-d aepicker 表明打包后的文件名</li>
<li>–dest lib  指定输出的目标文件</li>
</ul>
<p>然后我们执行 yarn build<br>可以看到 lib 文件夹下出现了三个文件</p>
<p><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558924162109-795823a3-06d9-4f9e-a02a-5516b11775d3.png" alt="image.png"></p>
<p>demo.html 不用管，下面的两个文件才是我们想要的。<br>一个是 umd 的，一个是 common 的。<br>在前端内我们一般都用 umd 的，因此可以在 package.json 加上这么一条 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"main"</span>: <span class="string">"lib/vue-simple-datepicker.umd.min.js"</span>,</span><br></pre></td></tr></table></figure>
<p>表明入口文件是 <strong>lib/vue-simple-datepicker.umd.min.js</strong><br>**<br><a name="c2zJZ"></a></p>
<h2 id="5-发布至-npm"><a href="#5-发布至-npm" class="headerlink" title="5. 发布至 npm"></a>5. 发布至 npm</h2><p>首先你要完善你的 package.json </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"vue-simple-datepicker-ln"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.1"</span>,</span><br><span class="line">  "private": false,    //一定要是 false</span><br><span class="line">  "main": "lib/vue-simple-datepicker.umd.min.js",</span><br><span class="line">  "repository": &#123;</span><br><span class="line">    "type": "git",</span><br><span class="line">    "url": "git@github.com:Storm4542/vue-simple-datepicker.git"</span><br><span class="line">  &#125;,</span><br><span class="line">  "bugs": &#123;</span><br><span class="line">    "url": "https://github.com/Storm4542/vue-simple-datepicker/issues"</span><br><span class="line">  &#125;,</span><br><span class="line">  "homepage": " https://storm4542.github.io/vue-simple-datepicker/",</span><br><span class="line">  "keywords": [</span><br><span class="line">    "datepicker",</span><br><span class="line">    <span class="string">"vue-datepicker"</span></span><br><span class="line">  ],</span><br><span class="line">  "license": "MIT",</span><br><span class="line">  "scripts": &#123;</span><br><span class="line">    "lib": "vue-cli-service build --target lib --name vue-simple-datepicker --dest lib packages/index.js",</span><br><span class="line">    "serve": "vue-cli-service serve",</span><br><span class="line">    "build": "vue-cli-service build"</span><br><span class="line">  &#125;,</span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">    "@vue/babel-preset-app": "^3.0.0",</span><br><span class="line">    "vue": "^2.6.6"</span><br><span class="line">  &#125;,</span><br><span class="line">  "devDependencies": &#123;</span><br><span class="line">    "@vue/cli-plugin-babel": "^3.5.3",</span><br><span class="line">    "@vue/cli-service": "^3.5.3",</span><br><span class="line">    "less": "^3.0.4",</span><br><span class="line">    "less-loader": "^4.1.0",</span><br><span class="line">    "vue-template-compiler": "^2.5.21"</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>登录 npm 。<br>yarn lib 后  npm publish 即可。</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Cordova-Vue实现点击两次返回退出应用" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="81b0b94a.html">Cordova+Vue实现点击两次返回退出应用</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="81b0b94a.html" class="article-date">
  <time datetime="2019-03-12T06:08:54.000Z" itemprop="datePublished">2019-03-12</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Cordova-Vue-实现点击两次退出应用"><a href="#Cordova-Vue-实现点击两次退出应用" class="headerlink" title="Cordova + Vue 实现点击两次退出应用"></a>Cordova + Vue 实现点击两次退出应用</h3><h4 id="注册事件"><a href="#注册事件" class="headerlink" title="注册事件"></a>注册事件</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注意在 deviceready 后使用,写在methods中</span></span><br><span class="line"><span class="comment">//点击返回按键</span></span><br><span class="line">  onBackKeyDown() &#123;</span><br><span class="line">       <span class="keyword">this</span>.$toast(<span class="string">'再点击一次退出应用'</span>);</span><br><span class="line">       <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.onBackKeyDown, <span class="literal">false</span>); <span class="comment">// 注销返回键</span></span><br><span class="line">       <span class="built_in">document</span>.addEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.exitApp, <span class="literal">false</span>);<span class="comment">//绑定退出事件</span></span><br><span class="line">       setInterval(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">             <span class="built_in">document</span>.addEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.onBackKeyDown, <span class="literal">false</span>);</span><br><span class="line">             <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.exitApp, <span class="literal">false</span>);</span><br><span class="line">           &#125;, <span class="number">3000</span>)</span><br><span class="line">        &#125;</span><br><span class="line"><span class="comment">//关闭APP</span></span><br><span class="line"> exitApp() &#123;</span><br><span class="line">         navigator.app.exitApp();</span><br><span class="line">        &#125;,</span><br></pre></td></tr></table></figure>
<h4 id="启动事件"><a href="#启动事件" class="headerlink" title="启动事件"></a>启动事件</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">created() &#123;</span><br><span class="line">      <span class="built_in">document</span>.addEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.onBackKeyDown, <span class="literal">false</span>);</span><br><span class="line">      <span class="keyword">this</span>.refreshTask();</span><br><span class="line">      <span class="keyword">this</span>.refreshNotice();</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h4 id="销毁事件"><a href="#销毁事件" class="headerlink" title="销毁事件"></a>销毁事件</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">beforeDestroy() &#123;</span><br><span class="line">       <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.onBackKeyDown, <span class="literal">false</span>); <span class="comment">// 注销返回键</span></span><br><span class="line">       <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.exitApp, <span class="literal">false</span>);</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<p>如果页面使用了<code>&lt;keep-alive&gt;</code>标签，那么销毁事件的时机为页面离开之前。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">beforeRouteLeave(to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.onBackKeyDown, <span class="literal">false</span>); <span class="comment">// 注销返回键</span></span><br><span class="line">    <span class="built_in">document</span>.removeEventListener(<span class="string">"backbutton"</span>, <span class="keyword">this</span>.exitApp, <span class="literal">false</span>);</span><br><span class="line">    <span class="keyword">this</span>.$indicator.close()</span><br><span class="line">    next()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Cordova下载并预览" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="990bab20.html">Cordova下载并预览功能</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="990bab20.html" class="article-date">
  <time datetime="2019-02-01T03:00:43.000Z" itemprop="datePublished">2019-02-01</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h2><p>近期混合应用开发需要下载和预览的功能，选择方案为先下载到本地，再使用<code>cordova-plugin-file-opener2</code>插件进行预览。</p>
<p>采用此预览方案文件会被先下载到本地，<code>cordova-plugin-file-opener2</code>插件其实可以直接打开网络地址来实现预览，采用此方式是基于以下考虑：</p>
<ol>
<li><p>避免重复下载</p>
</li>
<li><p>避免有文件格式解析错误的情况，用户可以到本地再次进行查看</p>
</li>
<li><p>下载目录可控</p>
</li>
</ol>
<h2 id="2-框架"><a href="#2-框架" class="headerlink" title="2.框架"></a>2.框架</h2><p>项目采用 <code>Cordova + Vue + MintUI</code></p>
<h2 id="3-操作"><a href="#3-操作" class="headerlink" title="3.操作"></a>3.操作</h2><ul>
<li>下载</li>
<li><ul>
<li><code>fileInfo</code>提供下载地址、文件名称、文件格式（或扩展名）</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">downLoad</span>(<span class="params">fileInfo</span>) </span>&#123;</span><br><span class="line">    Vue.$toast(<span class="string">'正在下载，请稍等'</span>);</span><br><span class="line">    <span class="keyword">new</span> FileTransfer().download(</span><br><span class="line">        <span class="built_in">encodeURI</span>(FILES_HOST + <span class="string">"/"</span> + fileInfo.fileid), <span class="comment">//uri网络下载路径</span></span><br><span class="line">        cordova.file.dataDirectory + fileInfo.fileid, <span class="comment">//文件本地存储路径</span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">fileEntry</span>) </span>&#123;</span><br><span class="line">            preView(fileEntry, fileInfo);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">            Vue.$toast(<span class="string">'下载失败'</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(error);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="literal">false</span>,</span><br><span class="line">        &#123;</span><br><span class="line">            headers: &#123;<span class="string">'Authorization'</span>: <span class="string">`Bearer <span class="subst">$&#123;localStorage.getItem(<span class="string">'CFA0'</span>)&#125;</span>`</span>&#125;,</span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>下载完成，预览文件</li>
</ul>
<ul>
<li><ul>
<li><p>使用 <code>cordova-plugin-file-opener2</code> 打开文件</p>
</li>
<li><p><code>mineType</code>使用 <code>mime-types</code>获取，提供扩展名即可获取（若后端提供格式则不需要）。</p>
</li>
</ul>
<p>  [地址]: <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/jshttp/mime-types</a>    “Mime-types”</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">preView</span>(<span class="params">fileEntry, fileInfo</span>) </span>&#123;</span><br><span class="line">    Vue.$toast(<span class="string">'开始预览'</span>);</span><br><span class="line">    <span class="keyword">let</span> url;</span><br><span class="line">    <span class="keyword">let</span> platform = device.platform.toLowerCase();</span><br><span class="line">    <span class="keyword">if</span> (platform === <span class="string">'android'</span>) &#123;</span><br><span class="line">        url = fileEntry.toInternalURL() <span class="comment">//安卓预览路径</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        url = fileEntry.toURL() <span class="comment">//ios 预览路径</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'路径'</span>, url);</span><br><span class="line">    cordova.plugins.fileOpener2.showOpenWithDialog(</span><br><span class="line">        url,</span><br><span class="line">        mime.lookup(fileInfo.fileType),</span><br><span class="line">        &#123;</span><br><span class="line">            error: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">                Vue.$toast(<span class="string">'预览失败'</span>);</span><br><span class="line">            &#125;,</span><br><span class="line">            success: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                Vue.$toast(<span class="string">'预览成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4-可能遇到的坑"><a href="#4-可能遇到的坑" class="headerlink" title="4. 可能遇到的坑"></a>4. 可能遇到的坑</h2><p>在预览文件的时候 <code>cordova-plugin-file-opener2</code>有可能会报以下错误：</p>
<blockquote>
<p>Attempt to invoke virtual method ‘android.content.res.XmlResourceParser android.content.pm.ProviderInfo.loadXmlMetaData(android.content.pm.PackageManager, java.lang.String)’ on a null object reference</p>
</blockquote>
<p>寻找很久，应该是因为权限问题导致，解决办法如下:</p>
<p>在 <code>AndroidManifest.xml</code>中<code>application</code>标签内增加</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">provider</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">android:name</span>=<span class="string">"io.github.pwlin.cordova.plugins.fileopener2.FileProvider"</span> 				  <span class="attr">android:authorities</span>=<span class="string">"$&#123;applicationId&#125;.opener.provider"</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">android:exported</span>=<span class="string">"false"</span> <span class="attr">android:grantUriPermissions</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta-data</span> </span></span><br><span class="line"><span class="tag">           <span class="attr">android:name</span>=<span class="string">"android.support.FILE_PROVIDER_PATHS"</span></span></span><br><span class="line"><span class="tag">           <span class="attr">android:resource</span>=<span class="string">"@xml/opener_paths"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">provider</span>&gt;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-JS变量提升" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="bd208f70.html">JS变量提升</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="bd208f70.html" class="article-date">
  <time datetime="2018-12-20T08:52:09.000Z" itemprop="datePublished">2018-12-20</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-var"><a href="#1-var" class="headerlink" title="1.var"></a>1.var</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br></pre></td></tr></table></figure>
<p>输出 a 为 <code>undefined</code></p>
<p>说明var在代码执行前就将 <strong>创建变量，并初始化为 undefined</strong> </p>
<h3 id="2-let"><a href="#2-let" class="headerlink" title="2.let"></a>2.let</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">//ReferenceError: a is not defined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br></pre></td></tr></table></figure>
<p>输出 <code>ReferenceError: a is not defined</code>，a  未定义</p>
<p>说明let在代码执行前 <strong>创建变量，并未初始化</strong></p>
<h3 id="3-function"><a href="#3-function" class="headerlink" title="3.function"></a>3.function</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// [Function:a]</span></span><br><span class="line">a()<span class="comment">//我是a</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="string">'我是a'</span>)&#125;</span><br></pre></td></tr></table></figure>
<p>说明 funtuon 在代码执行前  <strong>创建、初始化并赋值</strong></p>
<h3 id="4-const"><a href="#4-const" class="headerlink" title="4.const"></a>4.const</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">//ReferenceError: a is not defined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = <span class="number">1</span>;</span><br></pre></td></tr></table></figure>
<p>const 与 let 相同，但是唯一区别是 const 只有 <strong>创建和初始化并没有赋值</strong></p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-JS引用类型" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="39d3351.html">JS引用类型</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="39d3351.html" class="article-date">
  <time datetime="2018-12-12T03:08:15.000Z" itemprop="datePublished">2018-12-12</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="1-JS中的类型"><a href="#1-JS中的类型" class="headerlink" title="1.JS中的类型"></a>1.JS中的类型</h4><ul>
<li><p>基本类型</p>
<p>String</p>
<p>Boolean</p>
<p>Number</p>
<p>undefined</p>
<p>Null</p>
<p>Symbol</p>
</li>
<li><p>引用类型</p>
<p>Object</p>
</li>
</ul>
<p>对于基本类型，<code>=</code>代表的是值得拷贝，<code>===</code>代表的是值得比较。</p>
<p>对于引用类型，<code>=</code>代表的是引用地址的拷贝，<code>===</code>代表的是引用地址的比较。</p>
<h4 id="2-几个例子深入理解"><a href="#2-几个例子深入理解" class="headerlink" title="2.几个例子深入理解"></a>2.几个例子深入理解</h4><ul>
<li>案例一</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> b = a;</span><br><span class="line">a === b <span class="comment">// true</span></span><br><span class="line">b = <span class="number">2</span>;</span><br><span class="line">a === <span class="number">1</span> ; <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>基本类型Number，赋值为拷贝，当 <code>b</code>改变的时候不会影响到<code>a</code></p>
<ul>
<li>案例二</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> c = a ;</span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a === c <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>引用类型Object，比较的是引用地址，<code>a</code>和<code>b</code>的引用地址明显是不同的，所以他们不相等。</p>
<p><code>c</code>得到了<code>a</code>的引用的地址，因此<code>a===c</code></p>
<ul>
<li>案例三</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = a;</span><br><span class="line">b.info.age = <span class="number">22</span>;</span><br><span class="line">a === b <span class="comment">//true</span></span><br><span class="line">a.info.age === <span class="number">22</span> <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>因为<code>a</code>和<code>b</code>指向同一个地址，所以<code>b</code>做修改的时候，<code>a</code>同样修改了。</p>
<ul>
<li>案例四</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = a ; <span class="comment">//展开运算符浅拷贝</span></span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a.name === b.name <span class="comment">//true</span></span><br><span class="line">a.info === b.info <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>因为展开运算符是浅拷贝，所以两个对象指向不同的地址，即<code>a!==b</code>。</p>
<p>但是浅拷贝毕竟是浅拷贝。</p>
<p><code>name</code>是基本类型，拷贝的值，所以相同。</p>
<p><code>info</code>为引用类型，拷贝的地址，也相同。</p>
<ul>
<li>案例五</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify) ; <span class="comment">//深拷贝</span></span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a.name === b.name <span class="comment">//true</span></span><br><span class="line">a.info === b.info <span class="comment">//false</span></span><br><span class="line">a.info.age === b.info.age<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>深拷贝了，其他的不用说。</p>
<p>因为深拷贝过了，<code>info</code>指向的就是各自的地址了，没啥关系了。</p>
<p>但是基本类型该相同相同。</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-JS中的数组过滤和对象深拷贝" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="30db5aa.html">JS中的数组过滤和对象深拷贝</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="30db5aa.html" class="article-date">
  <time datetime="2018-10-19T02:13:10.000Z" itemprop="datePublished">2018-10-19</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>本文借鉴了该文章 </p>
<p>原数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> res = [</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Anne'</span>, <span class="attr">age</span>: <span class="number">23</span>, <span class="attr">gender</span>:<span class="string">'female'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Lisa'</span>, <span class="attr">age</span>: <span class="number">16</span>, <span class="attr">gender</span>:<span class="string">'female'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Jay'</span>, <span class="attr">age</span>: <span class="number">19</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Jay'</span>, <span class="attr">age</span>: <span class="number">22</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Mark'</span>, <span class="attr">age</span>: <span class="number">40</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h4 id="1-单个条件单数据筛选"><a href="#1-单个条件单数据筛选" class="headerlink" title="1.单个条件单数据筛选"></a>1.单个条件单数据筛选</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findOneByName</span>(<span class="params">res, name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.filter(<span class="function"><span class="params">item</span> =&gt;</span> item.name === name) <span class="comment">//注意:filter返回的是数组</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findOneByName(res,<span class="string">'Anne'</span>)) <span class="comment">// [ &#123; name: 'Anne', age: 23, gender: 'female' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="2-单个条件多个数据筛选"><a href="#2-单个条件多个数据筛选" class="headerlink" title="2.单个条件多个数据筛选"></a>2.单个条件多个数据筛选</h4><p>有时候可能会遇到重名情况</p>
<p>使用 <code>forEach</code>,<code>Map</code>或<code>for</code>遍历数组，push 进入一个临时数组返回。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findSomeByName</span>(<span class="params">res, name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> result = []</span><br><span class="line">    res.forEach(<span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (e.name === name) &#123;</span><br><span class="line">            result.push(e)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findSomeByName(res, <span class="string">'Jay'</span>)) </span><br><span class="line"><span class="comment">//[ &#123; name: 'Jay', age: 19, gender: 'male' &#125;,</span></span><br><span class="line"><span class="comment">//  &#123; name: 'Jay', age: 22, gender: 'male' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="3-多个条件单个数据筛选"><a href="#3-多个条件单个数据筛选" class="headerlink" title="3.多个条件单个数据筛选"></a>3.多个条件单个数据筛选</h4><p>数据中有两个 ‘ Jay ‘，我只想要那个 22 岁的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findOneByNameAge</span>(<span class="params">res, name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.filter(<span class="function"><span class="params">item</span> =&gt;</span> item.name === name &amp;&amp; item.age === age)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findOneByNameAge(res, <span class="string">'Jay'</span>, <span class="number">22</span>));</span><br><span class="line"><span class="comment">//[ &#123; name: 'Jay', age: 22, gender: 'male' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-多个条件多个筛选"><a href="#4-多个条件多个筛选" class="headerlink" title="4.多个条件多个筛选"></a>4.多个条件多个筛选</h4><p>我想找到所有叫 Jay 和  Anne 的人</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">multiFilter</span>(<span class="params">array, filters</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> filterKeys = <span class="built_in">Object</span>.keys(filters)</span><br><span class="line">    <span class="comment">// filters all elements passing the criteria</span></span><br><span class="line">    <span class="keyword">return</span> array.filter(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// dynamically validate all filter criteria</span></span><br><span class="line">        <span class="keyword">return</span> filterKeys.every(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//ignore when the filter is empty Anne</span></span><br><span class="line">            <span class="keyword">if</span> (!filters[key].length) <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">            <span class="keyword">return</span> !!~filters[key].indexOf(item[key])</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> filter = &#123;</span><br><span class="line">    name: [<span class="string">'Jay'</span>, <span class="string">'Anne'</span>],</span><br><span class="line">    age: []</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(multiFilter(res, filter));</span><br></pre></td></tr></table></figure>
<h4 id="5-判断是否有这个人，或者是否全部都为该人"><a href="#5-判断是否有这个人，或者是否全部都为该人" class="headerlink" title="5. 判断是否有这个人，或者是否全部都为该人"></a>5. 判断是否有这个人，或者是否全部都为该人</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// res 里有没有 Anne ?</span></span><br><span class="line"><span class="built_in">console</span>.log(res.some(<span class="function"><span class="params">item</span> =&gt;</span> item.name === <span class="string">'Anne'</span>));<span class="comment">//true</span></span><br><span class="line"><span class="comment">// res 里是不是全都是 Anne ?</span></span><br><span class="line"><span class="built_in">console</span>.log(res.every(<span class="function"><span class="params">item</span> =&gt;</span> item.name === <span class="string">'Anne'</span>));<span class="comment">//false</span></span><br></pre></td></tr></table></figure>
<h4 id="6-知识点1-Object-keys-获取数据索引或者对象属性"><a href="#6-知识点1-Object-keys-获取数据索引或者对象属性" class="headerlink" title="6.知识点1 : Object.keys() 获取数据索引或者对象属性"></a>6.知识点1 : Object.keys() 获取数据索引或者对象属性</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(arr)); <span class="comment">// [ '0', '1', '2' ]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="string">'1'</span>,</span><br><span class="line">    b: <span class="string">'2'</span>,</span><br><span class="line">    c: <span class="string">'3'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(obj));<span class="comment">//[ 'a', 'b', 'c' ]</span></span><br></pre></td></tr></table></figure>
<h4 id="7-对象的深拷贝"><a href="#7-对象的深拷贝" class="headerlink" title="7. 对象的深拷贝"></a>7. 对象的深拷贝</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> newRes = Json.parse(Json.stringify(res)); </span><br><span class="line"><span class="comment">//数据量不大的时候使用，而且必须遵循JSON格式,假如有 function 就无法拷贝</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归深拷贝 o1:得到的新对象 , o2:原对象</span></span><br><span class="line"><span class="keyword">let</span> newRes = &#123;&#125; ; <span class="comment">//想得到数组</span></span><br><span class="line"><span class="keyword">let</span> newRes = [] ; <span class="comment">//想得到对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepClone</span>(<span class="params">o1, o2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> o2) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> o2[k] === <span class="string">'object'</span>) &#123;</span><br><span class="line">            o1[k] = &#123;&#125;;</span><br><span class="line">            deepClone(o1[k], o2[k]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            o1[k] = o2[k];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">deepClone(newRes,res)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-QS中文文档" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="7b89c88d.html">QS中文文档</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="7b89c88d.html" class="article-date">
  <time datetime="2018-10-16T05:08:34.000Z" itemprop="datePublished">2018-10-16</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>只是简要的并且用自己的话翻译了一下，方便本人查阅。</p>
<h4 id="引入-QS-库"><a href="#引入-QS-库" class="headerlink" title="引入 QS 库"></a>引入 QS 库</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add qs</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> qs <span class="keyword">from</span> <span class="string">'qs'</span></span><br><span class="line"><span class="keyword">import</span> assert <span class="keyword">from</span> <span class="string">'assert'</span> <span class="comment">//用来测试</span></span><br></pre></td></tr></table></figure>
<h4 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h4><h6 id="1-Parse-Object"><a href="#1-Parse-Object" class="headerlink" title="1.Parse Object"></a>1.Parse Object</h6><ul>
<li>基本使用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = qs.parse(<span class="string">'a=c'</span>); <span class="comment">// &#123;a:'c'&#125;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>是否有原型</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> nullObject = qs.parse(<span class="string">"a[hasOwnProperty]=b"</span>, &#123; <span class="attr">plainObjects</span>: <span class="literal">true</span> &#125;); <span class="comment">//无原型链</span></span><br><span class="line"><span class="keyword">var</span> protoObject = qs.parse(<span class="string">"a[hasOwnProperty]=b"</span>, &#123;<span class="attr">allowPrototypes</span>: <span class="literal">true</span>&#125;);<span class="comment">//有原型链</span></span><br></pre></td></tr></table></figure>
<ul>
<li>嵌套生成</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = qs.parse(<span class="string">"foo[bar]=baz"</span>); <span class="comment">//&#123;foo:&#123;bar:baz&#125;&#125;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//嵌套的深度设置</span></span><br><span class="line"><span class="keyword">var</span> deep = qs.parse(<span class="string">'a[b][c][d][e][f][g][h][i]=j'</span>, &#123; <span class="attr">depth</span>: <span class="number">1</span> &#125;);</span><br><span class="line">assert.deepEqual(deep, &#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: &#123; <span class="string">'[c][d][e][f][g][h][i]'</span>: <span class="string">'j'</span> &#125; &#125; &#125;);</span><br><span class="line"><span class="comment">//最多只能到五层</span></span><br><span class="line"><span class="keyword">var</span> expected = &#123;</span><br><span class="line">    a: &#123;</span><br><span class="line">        b: &#123;</span><br><span class="line">            c: &#123;</span><br><span class="line">                d: &#123;</span><br><span class="line">                    e: &#123;</span><br><span class="line">                        f: &#123;</span><br><span class="line">                            <span class="string">'[g][h][i]'</span>: <span class="string">'j'</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> string = <span class="string">'a[b][c][d][e][f][g][h][i]=j'</span>;</span><br><span class="line">assert.deepEqual(qs.parse(string), expected);</span><br></pre></td></tr></table></figure>
<ul>
<li>限制数量</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> limited = qs.parse(<span class="string">'a=b&amp;c=d'</span>, &#123; <span class="attr">parameterLimit</span>: <span class="number">1</span> &#125;); <span class="comment">//限制为1</span></span><br><span class="line">assert.deepEqual(limited, &#123; <span class="attr">a</span>: <span class="string">'b'</span> &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>去除QueryFix</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> prefixed = qs.parse(<span class="string">'?a=b&amp;c=d'</span>, &#123; <span class="attr">ignoreQueryPrefix</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">assert.deepEqual(prefixed, &#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span> &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>设置判断分隔的符号</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> delimited = qs.parse(<span class="string">'a=b;c=d'</span>, &#123; <span class="attr">delimiter</span>: <span class="string">';'</span> &#125;);<span class="comment">// delimiter可以随意设置，比如 , &#123; |</span></span><br><span class="line">assert.deepEqual(delimited, &#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span> &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>使用正则判断分隔</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regexed = qs.parse(<span class="string">'a=b;c=d,e=f'</span>, &#123; <span class="attr">delimiter</span>: <span class="regexp">/[;,]/</span> &#125;);</span><br><span class="line">assert.deepEqual(regexed, &#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span>, <span class="attr">e</span>: <span class="string">'f'</span> &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>允许 dots</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withDots = qs.parse(<span class="string">'a.b=c'</span>, &#123; <span class="attr">allowDots</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">assert.deepEqual(withDots, &#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: <span class="string">'c'</span> &#125; &#125;);</span><br></pre></td></tr></table></figure>
<h6 id="2-Parse-Array"><a href="#2-Parse-Array" class="headerlink" title="2. Parse Array"></a>2. Parse Array</h6><ul>
<li>使用 [] 生成</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withArray = qs.parse(<span class="string">'a[]=b&amp;a[]=c'</span>);</span><br><span class="line">assert.deepEqual(withArray, &#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>可以指定 index<strong>（max=20）</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withIndexes = qs.parse(<span class="string">'a[1]=c&amp;a[0]=b'</span>);</span><br><span class="line">assert.deepEqual(withIndexes, &#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;);</span><br></pre></td></tr></table></figure>
<p>​    当指定的 index 很大<strong>(小于20)</strong>的时候，qs 会自动压缩</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withIndexes = qs.parse(<span class="string">'a[1]=c&amp;a[15]=b'</span>);</span><br><span class="line">assert.deepEqual(withIndexes, &#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>允许空值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withEmptyString = qs.parse(<span class="string">'a[]=&amp;a[]=b'</span>);</span><br><span class="line">assert.deepEqual(withEmptyString, &#123; <span class="attr">a</span>: [<span class="string">''</span>, <span class="string">'b'</span>] &#125;);</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> withIndexedEmptyString = qs.parse(<span class="string">'a[0]=b&amp;a[1]=&amp;a[2]=c'</span>);</span><br><span class="line">assert.deepEqual(withIndexedEmptyString, &#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">''</span>, <span class="string">'c'</span>] &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>当 index <strong>大于20</strong>的时候 会变成对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withMaxIndex = qs.parse(<span class="string">'a[100]=b'</span>);</span><br><span class="line">assert.deepEqual(withMaxIndex, &#123; <span class="attr">a</span>: &#123; <span class="string">'100'</span>: <span class="string">'b'</span> &#125; &#125;);</span><br></pre></td></tr></table></figure>
<p>​    当然这个 max 值你可以自己设定(0~20 ，超过20设不设置都一样了)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withArrayLimit = qs.parse(<span class="string">'a[1]=b'</span>, &#123; <span class="attr">arrayLimit</span>: <span class="number">0</span> &#125;);</span><br><span class="line">assert.deepEqual(withArrayLimit, &#123; <span class="attr">a</span>: &#123; <span class="string">'1'</span>: <span class="string">'b'</span> &#125; &#125;);</span><br></pre></td></tr></table></figure>
<p>​    你甚至可以直接不让它生成数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> noParsingArrays = qs.parse(<span class="string">'a[]=b'</span>, &#123; <span class="attr">parseArrays</span>: <span class="literal">false</span> &#125;);</span><br><span class="line">assert.deepEqual(noParsingArrays, &#123; <span class="attr">a</span>: &#123; <span class="string">'0'</span>: <span class="string">'b'</span> &#125; &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>混合使用，返回的是Object</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mixedNotation = qs.parse(<span class="string">'a[0]=b&amp;a[b]=c'</span>);</span><br><span class="line">assert.deepEqual(mixedNotation, &#123; <span class="attr">a</span>: &#123; <span class="string">'0'</span>: <span class="string">'b'</span>, <span class="attr">b</span>: <span class="string">'c'</span> &#125; &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>生成 Object</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraysOfObjects = qs.parse(<span class="string">'a[][b]=c'</span>);</span><br><span class="line">assert.deepEqual(arraysOfObjects, &#123; <span class="attr">a</span>: [&#123; <span class="attr">b</span>: <span class="string">'c'</span> &#125;] &#125;);</span><br></pre></td></tr></table></figure>
<h6 id="3-Parse-stringify"><a href="#3-Parse-stringify" class="headerlink" title="3. Parse stringify"></a>3. Parse stringify</h6><ul>
<li>基本使用,默认encode输出</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">qs.stringify(object, [options]);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span> &#125;), <span class="string">'a=b'</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: <span class="string">'c'</span> &#125; &#125;), <span class="string">'a%5Bb%5D=c'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>关闭 encode</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> unencoded = qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: <span class="string">'c'</span> &#125; &#125;, &#123; <span class="attr">encode</span>: <span class="literal">false</span> &#125;);</span><br><span class="line">assert.equal(unencoded, <span class="string">'a[b]=c'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>只对 value encode</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> encodedValues = qs.stringify(</span><br><span class="line">    &#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: [<span class="string">'d'</span>, <span class="string">'e=f'</span>], <span class="attr">f</span>: [[<span class="string">'g'</span>], [<span class="string">'h'</span>]] &#125;,</span><br><span class="line">    &#123; <span class="attr">encodeValuesOnly</span>: <span class="literal">true</span> &#125;</span><br><span class="line">);</span><br><span class="line">assert.equal(encodedValues,<span class="string">'a=b&amp;c[0]=d&amp;c[1]=e%3Df&amp;f[0][0]=g&amp;f[1][0]=h'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>自定义 encode</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> encoded = qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: <span class="string">'c'</span> &#125; &#125;, &#123; <span class="attr">encoder</span>: <span class="function"><span class="keyword">function</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Passed in values `a`, `b`, `c`</span></span><br><span class="line">    <span class="keyword">return</span> <span class="comment">// Return encoded string</span></span><br><span class="line">&#125;&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>自定义 decode</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> decoded = qs.parse(<span class="string">'x=z'</span>, &#123; <span class="attr">decoder</span>: <span class="function"><span class="keyword">function</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Passed in values `x`, `z`</span></span><br><span class="line">    <span class="keyword">return</span> <span class="comment">// Return decoded string</span></span><br><span class="line">&#125;&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>对 Array 使用 arrayFormat</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">qs.stringify(&#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;, &#123; <span class="attr">arrayFormat</span>: <span class="string">'indices'</span> &#125;)</span><br><span class="line"><span class="comment">// 'a[0]=b&amp;a[1]=c'</span></span><br><span class="line">qs.stringify(&#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;, &#123; <span class="attr">arrayFormat</span>: <span class="string">'brackets'</span> &#125;)</span><br><span class="line"><span class="comment">// 'a[]=b&amp;a[]=c'</span></span><br><span class="line">qs.stringify(&#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>] &#125;, &#123; <span class="attr">arrayFormat</span>: <span class="string">'repeat'</span> &#125;)</span><br><span class="line"><span class="comment">// 'a=b&amp;a=c'</span></span><br></pre></td></tr></table></figure>
<ul>
<li>对 Object 操作默认为 bracket notation</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: &#123; <span class="attr">c</span>: <span class="string">'d'</span>, <span class="attr">e</span>: <span class="string">'f'</span> &#125; &#125; &#125;);</span><br><span class="line"><span class="comment">// 'a[b][c]=d&amp;a[b][e]=f'</span></span><br></pre></td></tr></table></figure>
<pre><code>也可以设置为  dots notation
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: &#123; <span class="attr">c</span>: <span class="string">'d'</span>, <span class="attr">e</span>: <span class="string">'f'</span> &#125; &#125; &#125;, &#123; <span class="attr">allowDots</span>: <span class="literal">true</span> &#125;);</span><br><span class="line"><span class="comment">// 'a.b.c=d&amp;a.b.e=f'</span></span><br></pre></td></tr></table></figure>
<ul>
<li>空的字符串或者 null 的时候会省略值，但是等号（=）会保留</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="string">''</span> &#125;), <span class="string">'a='</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="literal">null</span> &#125;), <span class="string">'a='</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>当一个key对应的值为空时（空数组，空对象）,没有返回值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: [] &#125;), <span class="string">''</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: &#123;&#125; &#125;), <span class="string">''</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: [&#123;&#125;] &#125;), <span class="string">''</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: []&#125; &#125;), <span class="string">''</span>);</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: &#123; <span class="attr">b</span>: &#123;&#125;&#125; &#125;), <span class="string">''</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>value 为 undefined 的时候也会被忽略</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="literal">undefined</span> &#125;), <span class="string">'a='</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>一个 query 字符串可以预添加 (?)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span> &#125;, &#123; <span class="attr">addQueryPrefix</span>: <span class="literal">true</span> &#125;), <span class="string">'?a=b&amp;c=d'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>设置分隔字符串</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span> &#125;, &#123; <span class="attr">delimiter</span>: <span class="string">';'</span> &#125;), <span class="string">'a=b;c=d'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>如果只想重写日期对象的序列化，则可以提供序列化选项</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">7</span>);</span><br><span class="line">assert.equal(</span><br><span class="line">    qs.stringify(&#123; <span class="attr">a</span>: date &#125;, &#123; <span class="attr">serializeDate</span>: <span class="function"><span class="keyword">function</span> (<span class="params">d</span>) </span>&#123; <span class="keyword">return</span> d.getTime(); &#125; &#125;),</span><br><span class="line">    <span class="string">'a=7'</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<ul>
<li>可以使用 sort 选项，对 key 进行排序</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">alphabeticalSort</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a.localeCompare(b);</span><br><span class="line">&#125;</span><br><span class="line">assert.equal(qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'c'</span>, <span class="attr">z</span>: <span class="string">'y'</span>, <span class="attr">b</span> : <span class="string">'f'</span> &#125;, &#123; <span class="attr">sort</span>: alphabeticalSort &#125;), <span class="string">'a=c&amp;b=f&amp;z=y'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>通过对 key 进行 filter ，并对 value 操作</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">filterFunc</span>(<span class="params">prefix, value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (prefix == <span class="string">'b'</span>) &#123;</span><br><span class="line">        <span class="comment">// Return an `undefined` value to omit a property.</span></span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (prefix == <span class="string">'e[f]'</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> value.getTime();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (prefix == <span class="string">'e[g][0]'</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> value * <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">&#125;</span><br><span class="line">qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span>, <span class="attr">e</span>: &#123; <span class="attr">f</span>: <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">123</span>), <span class="attr">g</span>: [<span class="number">2</span>] &#125; &#125;, &#123; <span class="attr">filter</span>: filterFunc &#125;);</span><br><span class="line"><span class="comment">// 'a=b&amp;c=d&amp;e[f]=123&amp;e[g][0]=4'</span></span><br><span class="line">qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="string">'d'</span>, <span class="attr">e</span>: <span class="string">'f'</span> &#125;, &#123; <span class="attr">filter</span>: [<span class="string">'a'</span>, <span class="string">'e'</span>] &#125;);</span><br><span class="line"><span class="comment">// 'a=b&amp;e=f'</span></span><br><span class="line">qs.stringify(&#123; <span class="attr">a</span>: [<span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>], <span class="attr">e</span>: <span class="string">'f'</span> &#125;, &#123; <span class="attr">filter</span>: [<span class="string">'a'</span>, <span class="number">0</span>, <span class="number">2</span>] &#125;);</span><br><span class="line"><span class="comment">// 'a[0]=b&amp;a[2]=d'</span></span><br></pre></td></tr></table></figure>
<ul>
<li>对 null 的处理</li>
</ul>
<p>在默认下，null 会被当做空字符串处理</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> withNull = qs.stringify(&#123; <span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="string">''</span> &#125;);</span><br><span class="line">assert.equal(withNull, <span class="string">'a=&amp;b='</span>);</span><br></pre></td></tr></table></figure>
<p>Parse 不区分有没有 = 的参数，他们都会被解析为空字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> equalsInsensitive = qs.parse(<span class="string">'a&amp;b='</span>);</span><br><span class="line">assert.deepEqual(equalsInsensitive, &#123; <span class="attr">a</span>: <span class="string">''</span>, <span class="attr">b</span>: <span class="string">''</span> &#125;);</span><br></pre></td></tr></table></figure>
<p>现在，为了区分 null 和 空字符串的区别，你可以加上 <code>strictNullHandling</code>，他会区分 <code>null</code> 和空字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> strictNull = qs.stringify(&#123; <span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="string">''</span> &#125;, &#123; <span class="attr">strictNullHandling</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">assert.equal(strictNull, <span class="string">'a&amp;b='</span>);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> parsedStrictNull = qs.parse(<span class="string">'a&amp;b='</span>, &#123; <span class="attr">strictNullHandling</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">assert.deepEqual(parsedStrictNull, &#123; <span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="string">''</span> &#125;);</span><br></pre></td></tr></table></figure>
<p>如果你想忽略 <code>value === null</code>的键值对，可以使用 <code>skipNulls</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> nullsSkipped = qs.stringify(&#123; <span class="attr">a</span>: <span class="string">'b'</span>, <span class="attr">c</span>: <span class="literal">null</span>&#125;, &#123; <span class="attr">skipNulls</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">assert.equal(nullsSkipped, <span class="string">'a=b'</span>);</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
  
    <nav id="page-nav">
      <span class="page-number current">1</span><a class="page-number" href="index3.html">2</a><a class="page-number" href="index4.html">3</a><a class="page-number" href="index5.html">4</a><a class="extend next" rel="next" href="index3.html">Next &raquo;</a>
    </nav>
  
</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href=""><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
